<template>
  <div class="ProjectDetail">
    <div v-if="projectData" class="ProjectDetail-container">
      <div class="project-detail">
        <h1>{{ projectData[leftListKeyMap.label] }}</h1>
        <h5>原单位：这里是原单位名称</h5>
        <div class="project-detail-counter">
          <div
            v-for="(item, index) in getCounterInfos"
            :key="index"
            class="project-detail-counter-item"
          >
            <div
              :title="item.value"
              class="counter-item-value"
            >
              {{ item.value }}
            </div>
            <div class="counter-item-label">
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>

      <div class="project-circle">
        <div class="project-circle-item" style="opacity: 0;">
          <a-progress
            type="circle"
            :stroke-width="8"
            :percent="projectRate"
          />
          <div>资金使用率</div>
        </div>

        <div class="project-circle-item">
          <a-progress
            type="circle"
            :stroke-width="8"
            :percent="projectRate"
          />
          <div>资金使用率</div>
        </div>

        <!-- <div class="project-circle-item">
          <a-progress
            type="circle"
            :percent="75"
            :stroke-width="8"
          />
          <div>项目完成度</div>
        </div> -->
      </div>
    </div>
    <div v-else>
      暂无数据
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    projectData: {
      type: [Object, null],
      default: () => ({})
    },

    leftListKeyMap: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    getCounterInfos() {
      const { projectData, leftListKeyMap } = this;
      if (projectData) {
        return [
          {
            label: '发放总金额',
            value: projectData[leftListKeyMap.allPMoney]
          },
          {
            label: '发放总人数',
            value: projectData[leftListKeyMap.successFFZJE]
          },
          {
            label: '成功人数',
            value: projectData[leftListKeyMap.successPeopleCount]
          },
          {
            label: '失败人数',
            value: projectData[leftListKeyMap.successSB]
          }
        ];
      } else {
        return [];
      }
    },

    projectRate() {
      const { projectData, leftListKeyMap } = this;
      const rate = projectData[leftListKeyMap.moneyRate];
      return rate.split('%')[0] * 1;
    }
  }
};
</script>

<style lang="scss" scoped>
.ProjectDetail {
  width: 100%;
  height: 100%;
  color: #262626dc;
  font-family: PingFangSC, PingFangSC-Medium;

  .ProjectDetail-container {
    display: flex;
    height: 100%;
  }

  .project-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    h5 {
      color: #8C8C8C;
    }

    .project-detail-counter {
      flex: 1;
      margin-right: 100px;
      display: flex;
      justify-content: space-between;
      .project-detail-counter-item {
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column;
        padding-top: 20px;
        cursor: default;

        .counter-item-value {
          color: #FAAD14;
          font-size: 38px;
          font-weight: 700;
          max-width: 245px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .counter-item-label {
          font-size: 18px;
          font-weight: 600;
        }
      }
    }
  }

  .project-circle {
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .project-circle-item {
      > div {
        text-align: center;
        margin-top: 15px;
        font-weight: 600;
      }
    }
  }

}
</style>
